<template>
    <Card>
        <p slot="title">技师打卡</p>
        <div class="search-con search-con-top">
            <span style="margin-left: 30px;">技师信息：</span>
            <template>
                <Input placeholder="技师的姓名、昵称或者手机号" v-model="search.search" style="width: 200px; margin-left: 10px;"></Input>
            </template>
            <span style="margin-left: 30px;">打卡时间：</span>
            <DatePicker type="date" v-model="search.start_time" style="width: 200px"></DatePicker>
            <span style="margin: 0 3px;">-</span>
            <DatePicker type="date" v-model="search.end_time" style="width: 200px"></DatePicker>
            <Button type="primary" icon="ios-search" style="margin-left: 10px;" @click="getList">搜索</Button>
            <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
        </div>
        <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;">
            <template slot-scope="{ row , index}" slot="avatarSlot">
                <img :src="baseImgeUrl + row.tech_avatar" style="width: 60px;height: 60px;"
                    @click="showImg(baseImgeUrl + row.avatar)" />
            </template>
        </Table>
        <br>

        <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
        </Page>
        <Modal v-model="imgShow" width="330px" :closable="false">
            <img :src="imgShowUrl" style="width: 300px;">
        </Modal>
    </Card>
</template>
  
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    name: "technicianSign",
    data() {
        return {
            baseUrl: baseUrl,
            baseImgeUrl: baseImgeUrl,
            // 列表
            columns: [
                {
                    title: '头像',
                    align: "center",
                    key: 'avatar',
                    slot: "avatarSlot",
                    width:"100"
                }, {
                    title: '昵称',
                    align: "center",
                    key: 'tech_username',
                    width:"110"
                },
                {
                    title: '性别',
                    align: "center",
                    key: 'tech_gender',
                    width:"90"
                },
                {
                    title: '手机号',
                    align: "center",
                    key: 'tech_mobile',
                    width:"120"
                },
                {
                    title: '打卡经纬度',
                    align: "center",
                    key: 'lat',
                    width:"180",
                    render: (h, param) => {
                        let txt = param.row.lng + ',' + param.row.lat;
                        return h('div', txt);
                    }
                },
                {
                    title: '打卡时间',
                    align: "center",
                    width:"130",
                    key: 'create_time',
                },
                {
                    title: '打卡地址',
                    align: "center",
                    key: 'address',
                },
                
            ],
            // 数据
            list: [],
            total: 0,
            // 图片放大
            imgShow: false,
            imgShowUrl: '',
            // 搜索
            search: {
                page: 1,
                limit: 10,
            },
        }
    },
    methods: {
        // 查询技师信息
        getList() {
            this.$axios('/admin/tec/techClockList', this.search).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        searchs() {
            this.getList();
        },
        reset() {
            this.search = {
                page: 1,
                limit: 10,
            }
            this.getList();
        },
        changePage(page) {
            this.search.page = page;
            this.getList();
        },
        changeSize(size) {
            this.search.limit = size;
            this.getList();
        },
        showImg(url) {
            this.imgShow = true;
            this.imgShowUrl = url;
        },

    },
    created() {
        this.getList();
    }
}
</script>
<style>
.ivu-table-cell {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
  